<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;background-color: #fff;border-radius: 10px;">
      <div class="title"
        style="text-align: left;margin-left: 30px;margin-top:30px;border-left: 3px solid #fe0100;width: 100px;height: 25px;">
        <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">创建合同</h3>
      </div>
      <div class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
        <el-form label-width="130px">
          <el-form-item label="项目名称">
            <el-select v-model="data.salesId" placeholder="请选择项目" @click="getChangeList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item,index) in changeList" :key="index" :label="item.businessName"
                :value="item.salesId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同类型">
            <el-select v-model="data.contractType" placeholder="请选择合同类型" @click="getUserList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option label="销售合同" value="0"></el-option>
              <el-option label="采购合同" value="1"></el-option>
              <el-option label="合作协议" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主合同">
            <el-select v-model="data.parentId" placeholder="请选择主合同" @click="getChangeList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="item in contractList1" :key="item.contractId" :label="item.contractName"
                :value="item.contractId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同名称">
            <el-input v-model="data.contractName"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>

          <el-form-item label="合同编号">
            <el-input v-model="data.contractNumber"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="甲方">
            <el-input v-model="data.firstParty"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="甲方代表人">
            <el-input v-model="data.firstRepresentative"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="乙方">
            <el-input v-model="data.secondParty"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="乙方代表人">
            <el-input v-model="data.secondRepresentative"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="data.contractStatus" placeholder="请选择状态" @click="getUserList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option label="待审批" value="0"></el-option>
              <el-option label="已签订" value="1"></el-option>
              <el-option label="已完成" value="2"></el-option>
              <el-option label="已作废" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同总金额">
            <el-input v-model="data.contractAmount"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="客户">
            <el-select v-model="data.customId" placeholder="请选择客户" @click="getUserList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item,index) in userList" :key="index" :label="item.username" :value="item.userId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="负责人">
            <el-select v-model="data.principalId" placeholder="请选择负责人" @click="getUserList" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item,index) in userList1" :key="index" :label="item.realname" :value="item.userId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="款项说明">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="data.remark"
              style="width: 500px;overflow: hidden;">
            </el-input>
          </el-form-item>
          <el-form-item label="合同签订日期">
            <el-date-picker v-model="data.contractDate" type="date" placeholder="选择日期"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同到期日期">
            <el-date-picker v-model="data.dateDue" type="date" placeholder="选择日期"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button @click="addAgreement" type="danger" class="button">确定</el-button>
            <el-button @click="revert" type="danger" class="button">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        size: 100,
        contractList: [],  //合同列表
        contractList1: [],
        changeList: [], //商机列表
        userList: [],  //客户列表
        userList1: [],  //负责人列表
        fileList: [],
        contractId:'',
        file: '',
        data: {
          salesId: '',
          contractName: '',
          contractNumber: '',
          contractAmount: '',
          customId: '',
          secondRepresentative: '',
          remark: '',
          contractDate: '',
          dateDue: '',
          contractStatus: '',
          remark1: '',
          firstParty: '',
          firstRepresentative: '',
          secondParty: '',
          principalId:'',
          contractType: '',
          parentId:'',
          parentName:''

        }
      }
    },
    mounted() {
      this.getChangeList()
      this.getUserList()
      this.getcontractList()

    },
    methods: {
      // 上传图片的回调
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleSuccess(response, file, fileList) {

        this.$message.success(response.message);
        // this.getFileList()

      },
      handlePreview(file) {
        console.log(file);
      },
      // 主合同列表
      getcontractList() {
        var data = {
          current: 0,
          size: 100,
          // contractStatus: '1',
          contractType: '0'
        }
        this.$API.agreement.reqContractList(data).then(res => {
          if (res.data.code == 200) {
            this.contractList1 = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      
      // 上传文件
      // 获取文件列表
      // async getFileList() {
      //   // 解构出参数
      //   const { current, size } = this;
      //   var data = {
      //     current: 1,
      //     size: 100,
      //   }
      //   let result = await this.$API.file.reqFileList(data)
      //   this.total = result.data.total;
      //   this.fileList = result.data.data
      // },
      // 获取机会列表
      async getChangeList() {
        // 解构出参数
        const { current, size } = this;
        var data = {
          current: 1,
          size: 100,
        }
        let result = await this.$API.change.reqChangeList(data)
        // this.total = result.data.total;
        this.changeList = result.data.data
      },
      // 获取客户列表
      async getUserList() {
        // 解构出参数
        const { current, size, userType } = this;
        var data = {
          current: 1,
          size: 100,
          userType: "23"
        }
        var data1 = {
          current: 1,
          size: 100,
          userType: "1"
        }
        let result = await this.$API.user.reqUserList(data)
        // this.total = result.data.total;
        this.userList = result.data.data
        let result1 = await this.$API.user.reqUserList(data1)
        // this.total = result1.data.total;
        this.userList1 = result1.data.data
      },

      
      async addAgreement() {
        // 解构出参数
        if (this.contractName == '') {
          this.$message("无法添加合同")
        } else {
          const { salesId, remark,principalId, contractName, contractNumber, contractAmount, customId, secondRepresentative, contractDate, dateDue, contractStatus, firstParty, firstRepresentative, secondParty, contractType,parentId} = this.data;
          var data = {
            salesId: salesId,
            remark: remark,
            contractName: contractName,
            contractNumber: contractNumber,
            contractAmount: contractAmount,
            customId: customId,
            contractDate: contractDate,
            dateDue: dateDue,
            contractStatus: contractStatus,
            firstParty: firstParty,
            firstRepresentative: firstRepresentative,
            secondParty: secondParty,
            secondRepresentative: secondRepresentative,
            contractType: contractType,
            parentId:parentId,
            principalId:principalId
          }
          // 获取资源列表接口
          let result = await this.$API.agreement.reqAddContract(data);
          // console.log(result)
          this.$message.success("添加成功！");
          // this.reload();this.$message.success("添加成功！");
          this.contractList = result.data.data
          this.$router.push({ path: '/agreement' });

        }
      },
      revert() {
        this.$router.push({ path: '/agreement' });
      }
    },
  }
</script>
<style scoped>
  @import "../../../style/style.css";


  .bx>>>.el-form-item__content {
    width: 300px !important;
    /* border: 1px solid #000; */
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 100px;
  }

  .bx>>>.el-input__suffix {
    left: 260px;

  }

  .bx>>>.el-form-item {
    margin-bottom: 10px;
  }

  .bx>>>.el-input__inner {
    width: auto;
  }
</style>